<template>
    <div>
        <p ref="text">{{ message }}</p>
        <button @click="changeMessage">修改</button>
    </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'

const message = ref('你好！')

const changeMessage = () => {
    message.value = '更新后'

    // 此时 DOM 还没更新
    console.log(document.querySelector('p').textContent) // 还是“你好！”

    // 用 nextTick 等 DOM 更新完再访问
    nextTick(() => {
        console.log(document.querySelector('p').textContent) // 正确输出“更新后”
    })
}
</script>